<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <%@ include file="/include/tasklibs.jsp" %>
<style>
	.fixed-table-body thead th .th-inner{
		text-align: center;
	}
	.shotline{
		border-bottom: solid 2px #B4B4B4;
	}
	.textAlign-right{
		text-align: right;
	}
	.form-control{
		border: 0;
	}
	.taskNameContainer, .taskName{
		font-size: 20px;
	}
	.taskName{
		padding-top: 8px;
		font-weight: bold;
	}
	.subTaskDetail{
		cursor: pointer;
	}
	
</style>


<div class="animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                	<button class="btn btn-default" type="button" onclick="goback()">返回</button>
                    <form class="form-horizontal">
                        <div class="form-group taskNameContainer">
                            <label class="col-sm-2 control-label">任务名称</label>

                            <div class="col-sm-8">
                        		<span class="form-control taskName">${pt.taskName }</span>   
                            </div>
                        </div>
                    	 <div class="form-group">
                            <label class="col-sm-2 control-label">任务编号</label>
                            <div class="col-sm-8">
                            	<span class="form-control">${pt.code}</span>
                            </div>
                        </div>
                        
                    	 <div class="form-group">
                            <label class="col-sm-2 control-label">任务类型</label>
                            <div class="col-sm-8">
                            	<span class="form-control">${pt.taskTypaName}</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">任务周期</label>
                            <div class="col-sm-8">
                            	<span class="form-control">${pt.startTime} ~ ${pt.endTime}</span>  
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">任务赏金</label>

                            <div class="col-sm-4">
                        		<span class="form-control">${pt.rewardName }</span>
                            </div>
                        </div>
                          		
                        <div class="form-group">
                            <label class="col-sm-2 control-label">任务要求</label>

                            <div class="col-sm-8">
                                <textarea id="requireEditor">${pt.taskRequire }
		                        </textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">任务指引</label>

                            <div class="col-sm-8">
                                <textarea id="guideEditor">
		                        ${pt.taskGuidanceWords }
		                        </textarea>
                            </div>
                        </div>
					<%--	<div class="form-group">
                            <label class="col-sm-2 control-label">附件照片</label>
 
                            <div class="col-sm-8" id="image">
                               
                            </div>
                       </div>--%>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">附件照片</label>
                            <div class="col-sm-8">
                                <div id="gallery" class="gallery">
                                    <c:forEach var="imageUrl" items="${pt.imagesList}" varStatus="status">
                                        <a href="${imageUrl}" title=""><img style="width:150px;height:150px;" src="${imageUrl}"></a>
                                    </c:forEach>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>  
	<div class="col-sm-12">
    	<div class="ibox float-e-margins">
            <div class="ibox-content">      
            	<table id="taskList"></table>
            </div>
    	</div>
    </div>
</div>

<script>
     function goback(){
    	 $('.J_iframe').load('web/taskList.html');
     }
/*   $(function(){
	 var images = "${pt.taskGuidancePictures}" ;
	 console.log(images);
	 var str= new Array();   
	 str=images.split(",");  
	 for (i=0;i<str.length ;i++ )   
	    {   
		 var td=$("<img style='width:100px;height:100px' class='photo' src='"+str[i]+"'/>");  
		 $("#image").append(td).append(" ");
	    }   
   })*/
	var Controller = {
		taskListTable: null,
		init: function(){
			Controller.initEditor();
			Controller.initDropzone();
			Controller.initTable();
            Controller.initRebox();
		},
		initLaydate:function(){
		    laydate({
	            elem: '#startDate'
	        });
	        laydate({
	            elem: '#endDate'
	        });
		},
        initRebox: function(){
            $('#gallery').rebox({ selector: 'a' });
            $('#gallery').bind('rebox:open', function(e){
                $('.rebox').width($('.J_iframe').width() + 70);
                $('.rebox').appendTo($('.J_iframe'));
            });
        },
		initDropzone: function(){
			Dropzone.options.myAwesomeDropzone = {

                autoProcessQueue: false,
                uploadMultiple: true,
                parallelUploads: 100,
                maxFiles: 100,

                // Dropzone settings
                init: function () {
                    var myDropzone = this;

                    this.element.querySelector("button[type=submit]").addEventListener("click", function (e) {
                        e.preventDefault();
                        e.stopPropagation();
                        myDropzone.processQueue();
                    });
                    this.on("sendingmultiple", function (){});
                    this.on("successmultiple", function (files, response) {});
                    this.on("errormultiple", function (files, response) {});
                }

            }
		},
		initTable: function(){
			Controller.taskListTable = $('#taskList').bootstrapTable({
	            pagination:true,
	            pageSize:10,
	            sidePagination: "server",
				url:"web/findChildTaskList.json?parentTaskId="+'${pt.id}',
			    columns: [{
			        field: 'number',
			        title: '序号',
			        width: '40px',
                    formatter: function (value, row, index) {
                        return index+1;
                    }
			    }, {
                    field: 'code',
                    title: '任务编码'
                },{
			        field: 'taskName',
			        title: '任务名称'
			    }, {
			        field: 'storeCode',
			        title: '门店编码'
			    },{
                    field: 'status',
                    title: '状态'
                }, {
			        field: 'storeName',
			        title: '门店名称'
			    }, {
			        field: 'storeAddress',
			        title: '门店地址'
			    }, {
			        field: 'startDate',
			        title: '开始日期'
			    }, {
			        field: 'endDate',
			        title: '结束日期'
			    }, {
			        field: 'operate',
			        title: '操作',
			        formatter: operateFormatter
			    }],
			    idField: 'id', //主键
			    uniqueId: 'id'
			});
			
			function operateFormatter(value, row, index) {
		        return [
		    		'<div class="operate">',
		            '<span class="subTaskDetail" id=' + row.id + '>',
		            '查看详情',
		            '</span>'
		        ].join('');
		    }
		},
		initEditor: function(){
			var requireEditor = new Simditor({
                textarea: $('#requireEditor'),
                toolbar: false
            });
            var guideEditor = new Simditor({
                textarea: $('#guideEditor'),
                toolbar: false
            });
		},
		bindEvents: function(){
			/*$(document).on("click",".subTaskDetail",function(){
				$('.J_iframe').load('child/subTaskDetail.html?id='+$(this).attr("id"));
			});*/

            $(document).on("click",".subTaskDetail",function(){
                $(document).off("click",".subTaskDetail");
                $('.J_iframe').load('child/subTaskDetail.html?id='+$(this).attr("id"));
            })
		}
	}
	
    $(document).ready(function () {
        Controller.init();
        Controller.bindEvents();
        $(".simditor-body").attr("contenteditable",false);
    });
    
</script>

